<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/theme.css">
<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/style.css">

<div id="orderReturnPage">
    <!-- 列表 -->
    <el-table :data="tableData" border>
        <el-table-column prop="or_id" label="id" width="80"></el-table-column>
        <el-table-column prop="serial_number" label="售后编号" width="170"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="170"></el-table-column>
        <el-table-column label="售后类型" width="100">
            <template slot-scope="scope">
                @{{ scope.row.or_type == 1 ? '退货退款' : '仅退款' }}
            </template>
        </el-table-column>
        <el-table-column label="状态" width="70">
            <template slot-scope="scope">
                @{{ orderStatus.find(v => v.value == scope.row.or_sell_status)?.label }}
            </template>
        </el-table-column>
        <el-table-column prop="user_mobile" label="买家" width="100"></el-table-column>
        <el-table-column label="退货原因" width="140">
            <template slot-scope="scope">
                @{{ orderReason.find(v => v.value == scope.row.or_reason)?.label }}
            </template>
        </el-table-column>
        <el-table-column prop="freight" label="邮费" width="70"></el-table-column>
        <el-table-column prop="pay_price" label="支付金额" width="90"></el-table-column>
        <el-table-column prop="or_real_price" label="退款金额" width="90"></el-table-column>
        <el-table-column label="凭证" width="90">
            <template slot-scope="scope">
                <span v-if="!scope.row.img_id_json.length"></span>
                <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.img_id_json[0]"
                    :preview-src-list="scope.row.img_id_json"
                    v-else>
                </el-image>
            </template>
        </el-table-column>
        <el-table-column label="商品信息" width="360">
            <template slot-scope="scope">
                <el-table :data="scope.row.goods" border class="order-goods-table">
                    <el-table-column label="图片" width="75">
                        <template slot-scope="good">
                            <el-image
                                style="width: 50px; height: 50px"
                                :src="good.row.image"
                                :preview-src-list="[good.row.image]">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="名称"></el-table-column>
                    <el-table-column prop="spec" label="规格"></el-table-column>
                    <el-table-column prop="quantity" label="数量" width="60"></el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column prop="or_approved_time" label="审核时间" width="150"></el-table-column>
        <el-table-column prop="or_api_time" label="退款时间" width="150"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
                <el-dropdown trigger="click" v-if="scope.row.or_sell_status == 1">
                    <el-button type="primary">
                        审核<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button type="primary" size="small" v-on:click="onClickRow('全额退款', scope.row)">全额退款</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button type="primary" size="small" v-on:click="onClickRow('部分退款', scope.row)">部分退款</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button type="danger" size="small" v-on:click="onClickRow('拒绝退款', scope.row)">拒绝退款</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="order-pagination">
        <el-pagination background layout="prev, pager, next" :total="total" v-on:current-change="currentChange"></el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog :title="modalForm.type==1 ? '全额退款' : '部分退款'"
            :visible.sync="modalForm.show"
            width="35%">
            <el-form :model="modalForm" label-position="top">
                <el-form-item label="退款金额：">
                    <el-input v-model="modalForm.price" placeholder="请输入" type="number" :disabled="modalForm.type==1 ? true : false"></el-input>
                </el-form-item>
                <el-form-item label="退款原因：">
                    <el-input v-model="modalForm.remark" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="退款地址：" v-if="modalForm.row.or_type == 1">
                    <el-select v-model="modalForm.address" {{--placeholder="请选择"--}} style="width: 100%">
                        <el-option
                            v-for="(item, index) in addressList"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="modalForm.show = false">取 消</el-button>
            <el-button type="primary" @click="onModalConfirm">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script src="/js/vue/vue-2.7.js"></script>
<script src="/js/element-ui/lib/index.js"></script>
<script src="/js/utils/ajaxFunc.js?timestamp=1731402984445"></script>
<script>
const newAuth = '{{ $newAuth }}';
const ossPrefix = '{{ config('oss.url') }}';

$(function() {
    let orderListVm = new Vue({
        el: '#orderReturnPage',
        data: {
            page: 1,
            limit: 10,
            total: 0,
            tableData: [],
            addressList: [],
            modalForm: {
                show: false,
                row: {},
                price: '',
                // 1：全部，2：部分
                type: '',
                address: '',
                remark: ''
            },
            // modalShow: false，
            orderStatus: [{
                value: 0,
                label: '已取消'
            }, {
                value: 1,
                label: '待审核'
            }, {
                value: 2,
                label: '同意'
            }, {
                value: 3,
                label: '拒绝'
            }, {
                value: 5,
                label: '完成'
            }, {
                value: 6,
                label: '完成'
            }],
            orderReason: [{
                value: 1,
                label: '7天无理由'
            }, {
                value: 2,
                label: '商品与描述不一致'
            }]
        },
        methods: {
            currentChange(page) {
                this.page = page
                this.getList()
            },
            getList(val) {
                if(val) {
                    this.page = 1
                    this.tableData = []
                }

                let params = {
                    page: this.page,
                    limit: this.limit
                }
                ajaxPostFunc('/v1/api/productOrderReturn/paging', params, {
                    'newAuth': newAuth
                }, res => {
                    this.total = res.total
                    this.tableData = res.data.map(v => ({
                        ...v,
                        or_api_time: v.or_api_time ? timestampToTime(v.or_api_time*1000) : null,
                        or_approved_time: v.or_approved_time ? timestampToTime(v.or_approved_time*1000) : null,
                        img_id_json: v.img_id_json ? v.img_id_json.map(image => getImgUrlFunc(image, ossPrefix)) : [],
                        goods: v.goods ? v.goods.map(good => ({
                            ...good,
                            image: getImgUrlFunc(good.spec_file_id || good.product_file_id, ossPrefix)
                        })) : []
                    }))
                })
            },
            getAddress() {
                ajaxPostFunc('/v1/api/productOrderReturn/sellerAddressList', {}, {
                    'newAuth': newAuth
                }, res => {
                    this.addressList = res.map(v => ({
                        ...v,
                        value: v.id,
                        label: `${v.contacts}/${v.mobile}/${v.full_address}`
                    }))
                })
            },
            onClickRow(type, row) {
                this.modalForm.row = row
                this.modalForm.price = ''
                this.modalForm.address = ''
                this.modalForm.remark = ''
                if(type == '全额退款') {
                    this.modalForm.type = 1
                    this.modalForm.price = row.or_real_price
                    this.modalForm.show = true
                } else if(type == '部分退款') {
                    this.modalForm.type = 2
                    this.modalForm.show = true
                } else if(type == '拒绝退款') {
                    this.$prompt('拒绝原因', '拒绝退款', {
                        confirmButtonText: '提交',
                        cancelButtonText: '取消'
                    }).then(({ value }) => {
                        this.onAuditApi({
                            serialNumber: row.serial_number,
                            status: 3,
                            remark: value
                        })
                    })
                }
            },
            onModalConfirm() {
                let { serial_number, or_real_price, or_type } = this.modalForm.row

                if(!this.modalForm.price) {
                    this.$message.error('请填写退货金额')
                } else if(parseFloat(this.modalForm.price) > parseFloat(or_real_price)) {
                    this.$message.error(`超过最大可退金额￥${or_real_price}`)
                } else if(or_type == 1 && !this.modalForm.address) {
                    this.$message.error('请选择收货地址')
                } else {
                    let params = {
                        serialNumber: serial_number,
                        status: 2,
                        refundType: this.modalForm.type == 1 ? 1 : 0,
                        price: priceToFixed(this.modalForm.price),
                        remark: this.modalForm.remark
                    }
                    if(this.modalForm.address) {
                        let address = this.addressList.find(v => v.value == this.modalForm.address)
                        params.contacts = address.contacts
                        params.mobile = address.mobile
                        params.address = address.full_address
                    }
                    this.onAuditApi(params)
                    this.modalForm.show = false
                }
            },
            // 审核接口
            onAuditApi(params) {
                ajaxPostFunc('/v1/api/productOrderReturn/audit', params, {
                    'newAuth': newAuth
                }, res => {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.getList()
                })
            }
        },
        mounted() {
            this.getList('change')
            this.getAddress()
        }
    })
})
</script>

<style scoped>
    #orderReturnPage {
        background-color: #fff;
        padding: 15px 0;
    }

    .order-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
    }

    .order-goods-table .el-table__cell {
        padding: 5px 0;
    }

    .order-goods-table .cell {
        line-height: 16px;
    }
</style>
